<template>
    <!--地图容器-->
    <h2 style="">地址：</h2>
    <div id="container"></div>
</template>

<script setup lang="ts">
import { shallowRef, onMounted } from 'vue' // 引入 shallowRef 和 onMounted
import AMapLoader from '@amap/amap-jsapi-loader' // 引入高德地图加载器

// 定义组件名称
defineOptions({
    name: 'GaodeMap'
});

// 使用 shallowRef 来存储地图对象
const map = shallowRef<any>(null);

// 初始化地图方法
const initMap = () => {
    AMapLoader.load({
        key: "af060db26369b6987132c6a5db41b59b", // 填入你注册账号后获取的 API Key
        version: "2.0", // 指定要加载的 JSAPI 版本，缺省时默认为 1.4.15
        plugins: [''], // 可以指定需要加载的插件，如比例尺插件如比例尺'AMap.Scale'等
    }).then((AMap) => {
        // 创建地图实例并渲染到指定容器
        map.value = new AMap.Map("container", {
            viewMode: "3D", // 是否为 3D 地图模式
            zooms: [4, 18], // 设置地图级别的范围
            zoom: 5, // 初始化地图级别
            center: [112.560796, 37.870034], // 初始化地图中心点位置
        });
        var weixing = new AMap.TileLayer.Satellite({//定义卫星屠村
            zIndex: 10
        });
        map.value.add(weixing);//添加卫星屠村
    }).catch(e => {
        console.error("地图加载失败: ", e);
    });
}

// 在组件挂载后调用初始化地图方法
onMounted(() => {
    initMap();
});

</script>

<style scoped>
#container {
    width: 80%;
    height: 400px;
    margin: 100px auto;
    border: 2px solid red;
}
</style>